import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { Textarea } from '../../components/ui/textarea';

const meta: Meta<typeof Textarea> = {
  title: 'UI/Textarea',
  component: Textarea,
  tags: ['autodocs'],
  argTypes: {
    disabled: {
      control: 'boolean',
      description: '是否禁用',
    },
    placeholder: {
      control: 'text',
      description: '占位文本',
    },
    rows: {
      control: { type: 'number', min: 1, max: 20 },
      description: '文本域行数',
    },
  },
};

export default meta;
type Story = StoryObj<typeof Textarea>;

export const Default: Story = {
  args: {
    placeholder: '请输入内容',
    rows: 4,
  },
};

export const Disabled: Story = {
  args: {
    disabled: true,
    value: '这是一个禁用状态的文本域',
    rows: 4,
  },
};

export const WithLabel: Story = {
  render: () => (
    <div className="grid w-full gap-1.5">
      <label htmlFor="message" className="text-sm font-medium">留言</label>
      <Textarea placeholder="请输入您的留言" id="message" rows={5} />
    </div>
  ),
};

export const WithDescription: Story = {
  render: () => (
    <div className="grid w-full gap-1.5">
      <label htmlFor="feedback" className="text-sm font-medium">反馈</label>
      <Textarea placeholder="请输入您的反馈意见" id="feedback" rows={4} />
      <p className="text-sm text-gray-500">您的反馈将帮助我们改进产品。</p>
    </div>
  ),
};
